<template>
  <div class='container'>
    <div class='list'>

      <div class='list-block'>
        <img src='/static/img/electric.png'>
        <div class='list-info'><span class='info-title'>电流</span><span class='info-content'>单位：安培(A)</span></div>
        <span class='list-num'>{{ electricity }}</span>
      </div>

      <div class='list-block'>
        <img src='/static/img/voltage.png'>
        <div class='list-info'><span class='info-title'>电压</span><span class='info-content'>单位：伏特(V)</span></div>
        <span class='list-num'>{{ voltage }}</span>
      </div>

      <div class='list-block'>
        <img src='/static/img/power.png'>
        <div class='list-info'><span class='info-title'>功率</span><span class='info-content'>单位：瓦特(W)</span></div>
        <span class='list-num'>{{ power }}</span>
      </div>

      <div class='list-block'>
        <img src='/static/img/power-factor.png'>
        <div class='list-info'><span class='info-title'>开关状态</span><span class='info-content'>单位：无</span></div>
        <span class='list-num'>{{ power_status }}</span>
      </div>

    </div>

    <div class='button-control'>
      <img @click='connectPaho' style='width: 96px; height: 96px;' src='/static/img/power-on.png'>
      <span style='margin-top: 50rpx;'>{{ socket_status }}</span>
    </div>

    <i-message id='message' />

  </div>
</template>

<script>

// import store from '../store/store'
import { request } from '@/utils/index'

// const { $Message } = require('../../../static/dist/base/index')

import Paho from '../../../static/js/paho-mqtt-min'

export default {
  data () {
    return {
      electricity: '00.00',
      voltage: '00.00',
      power: '00.00',
      power_status: 'NULL',
      socket_status: '未连接',
      connected: false,
      timer: null,
      token: '',
      switch: false,

      client: null
    }
  },

  components: {},

  created () {
    this.login()
    this.initPaho()
  },

  methods: {
    connectPaho () {
      if (this.switch) {
        this.client.send('down/15', JSON.stringify({ 'att': { 'io': 1 } }))
        wx.showToast({
          title: '发送io:1',
          icon: 'success',
          duration: 1000
        })
        this.switch = false
      } else {
        wx.showToast({
          title: '发送io:0',
          icon: 'success',
          duration: 1000
        })
        this.client.send('down/15', JSON.stringify({ 'att': { 'io': 0 } }))
        this.switch = true
      }
    },
    login () {
      request('/user/login', {
        username: 'aeo123',
        password: '20106'
      }, 'POST').then((ids) => {
        this.token = 'Bearer ' + ids.token
      }, (e) => {
        return false
      })
    },
    initPaho () {
      let that = this
      var clientid = 'user-' + Math.floor(Math.random() * 10)
      this.client = new Paho.Client('wss://connect.z-link.net/mqtt', clientid)
      this.client.onConnectionLost = this.onConnectionLost
      this.client.onMessageArrived = this.onMessageArrived

      this.client.connect({
        userName: '',
        password: '',
        onSuccess: function () {
          that.socket_status = '成功连接'
          wx.showToast({
            title: '连接成功',
            icon: 'success',
            duration: 1000
          })
          that.client.subscribe('/device/15', {
            onSuccess: function () { console.log('订阅成功') },
            onFailure: function () { console.log('订阅失败') }
          })
        },
        onFailure: function () { console.log('PAHO连接失败') }
      })
    },
    onConnectionLost (responseObject) {
      if (responseObject.errorCode !== 0) {
        console.log('onConnectionLost:' + responseObject.errorMessage)
      }
    },
    onMessageArrived (message) {
      console.log(message)
      var data = JSON.parse(message.payloadString)
      var stream = JSON.parse(data.payload.stream)
      this.electricity = stream.c.toFixed(3)
      this.power = stream.p.toFixed(3)
      this.voltage = stream.v.toFixed(1)
    }
  }
}
</script>

<style scoped>
.list {
  display: flex;
  padding-top: 30rpx;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.list-block {
  width: 90%;
  height: 150rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-radius: 20rpx;
  background-color: #F8F8F8;
}
.list-block:nth-child(n+1) {
  margin-top: 20rpx;
}
.list-block img {
  width: 48px;
  height: 48px;
}
.list-block .list-num {
  width: 150rpx;
  color: #828282;
  font-size: 28px;
}
.list-info {
  width: 200rpx;
  margin-left: -8%;
  display: inline-block;
}
.list-info span {
  display: block;
}
.list-info .info-title {
  font-size: 16px;
}
.list-info .info-content {
  font-size: 12px;
  margin-top: 10rpx;
  color: #999;
}
.button-control {
  margin-top: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.button-control img {
  width: 96px;
  height: 96px;
}
</style>
